import React, { Component } from 'react'
import { Carousel } from 'antd-mobile'

import { SwiperWrap } from './styledIndex'
import { get } from 'utils/http'

import { HeaderWrap } from './styledIndex'
import location from 'assets/images/location.png'
import calendar from 'assets/images/calendar.png'
import find from 'assets/images/find.png'
import { connect } from 'react-redux'
import { NavLink,withRouter } from 'react-router-dom'

const mapState = state => ({
    cityId: state.pages.cityId,
    cityName: state.pages.cityName,
    cityPy: state.pages.cityPy
})
const mapDispatch = dispatch => ({
    changestate(opts) {
        dispatch({
            type: opts.type,
            data: opts.data
        })
    }
})
@withRouter
@connect(mapState,mapDispatch)
class Swiper extends Component {

    state = {
        imgList: []
    }

    async componentDidMount() {
        let result = await get({
            url: `/api/home/index/getClassifyHome?city_id=${this.props.cityId}&abbreviation=${this.props.cityPy}&version=6.0.9&referer=2`
        })
        
        this.setState({
            imgList: result.data.slide_list
        })
    }

    render() {
        return (
            <div>
                <HeaderWrap className="header">
                    <div>
                        <NavLink to='/citylist'>
                            <img src={location} alt=""/><span>{this.props.cityName}</span>
                        </NavLink>
                    </div>
                    <div>
                        <NavLink to='/search'>
                            <img src={find} alt=""/><span>搜索热门演出</span>
                        </NavLink>
                    </div>
                    <span className="cal">
                        <NavLink to='/calendar'>
                            <img src={calendar} alt=""/>
                        </NavLink>
                    </span>
                </HeaderWrap>
                <SwiperWrap>
                    {
                        this.state.imgList.length && (
                            <Carousel
                                autoplay={true}
                                infinite
                                autoplayInterval={2000}
                                dotStyle={{
                                    width: 5,
                                    height: 5,
                                    backgroundColor: 'rgba(255,255,255,.5)',
                                    borderRadius: '50%'
                                }}
                                dotActiveStyle={{
                                    width: 13,
                                    height: 5,
                                    backgroundColor: '#fff',
                                    borderRadius: '30%'
                                }}
                            >
                            {
                                this.state.imgList.map((value) => (
                                    <div key={value.url} onScroll={this.handleScroll}>
                                        <img src={value.image_url} alt="" key={value.title}/>
                                    </div>
                                ))
                            }
                            </Carousel>
                        )
                    }
                </SwiperWrap>
                
            </div>
        );
    }
}

export default Swiper;